<template>
	<view class="text-df">
		<view style="position: relative;">
			<!-- <view style="position: absolute; top: 0; left: 0;margin-top: 20rpx;">
				<uni-icons type="left" size="30" color="#fff"></uni-icons>
			</view> -->
			<image :src="imgURL+detail.indexImg" style="width: 100%; position: relative;" mode="aspectFill"></image>
			<button size="mini"
				style="position: absolute; bottom: 0; right: 0; display: flex;border-radius: 50rpx;height: 70rpx;line-height: 70rpx;"
				class="bg-white text-low margin-xs" open-type="share">
				<view class="iconfont icon-fenxiang1 text-bold" style="font-size: 40rpx; margin-right: 5rpx;"></view>
				<text>分享</text>
			</button>
		</view>

		<!-- 基本信息 -->
		<view class="bg-white padding-com ">
			<view class="text-low text-sm" style="text-align: right;">
				<text class="margin-right-xs">线上库存：{{detail.inventory}}</text>
				<text>销量：{{detail.salesVolume}}</text>
			</view>
			<view class="theme-color text-bold">
				<text>￥</text>
				<text class="text-xxl">{{detail.monovalent}}</text>
			</view>
			<view class="text-bold text-lg margin-top-xs">{{detail.productName}}</view>
			<view class="flex-row-bt">
				<view class="theme-color flex-row padding-top-xs">
					<view class=" flex-row">
						<uni-icons type="checkbox" size="18" color="#EE3F4D"></uni-icons>
						<view class="text-sm" style="margin: 2rpx 0 0 0;">门店自提</view>
					</view>
					<view class=" flex-row margin-left-xs">
						<uni-icons type="checkbox" size="18" color="#EE3F4D"></uni-icons>
						<view class="text-sm" style="margin: 2rpx 0 0 0;">同城配送</view>
					</view>
				</view>
				<view style="text-align: center;" class="text-low">
					<view class="iconfont icon-kefu1"></view>
					<view class="text-sm">客服</view>
				</view>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="margin-top-sm bg-white padding-com">
			<view class="flex-row margin-bottom-sm">
				<view style="" class="vertical-line theme-bg-color"></view>
				<text class="text-lg margin-left-xs" style="">商品详情</text>
			</view>
			<divider v-if="detail.proDetails==null||detail.proDetails==''"></divider>
			<uv-parse v-else :content="detail.proDetails"></uv-parse>
		</view>


	</view>


</template>

<script setup lang="ts">
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		imgURL
	} from '../../api/request';
	import {
		reactive
	} from "vue";
	import { getProductInfo } from "../../api/supermarket/supermarket";

	let detail = reactive({
		"id": null,
		"indexImg": null,
		"productName": null,
		"monovalent": null,
		"inventory": null,
		"salesVolume": null,
		"proDetails": null
	})

	onLoad((option) => {
		//请求商品详情
		get_detail(option.id)
	})

	//请求商品详情 '1780640329198743552'
	const get_detail = (id) => {
		getProductInfo(id).then(res => {
			detail.id = JSON.parse(JSON.stringify(res)).data.id
			detail.indexImg = JSON.parse(JSON.stringify(res)).data.indexImg
			detail.productName = JSON.parse(JSON.stringify(res)).data.productName
			detail.monovalent = JSON.parse(JSON.stringify(res)).data.monovalent
			detail.inventory = JSON.parse(JSON.stringify(res)).data.inventory
			detail.salesVolume = JSON.parse(JSON.stringify(res)).data.salesVolume
			detail.proDetails = JSON.parse(JSON.stringify(res)).data.proDetails
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
</style>